<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>百度换肤效果</title>
  <style>
    body {
      /* 背景图 */
      background-image: url(./images/1.jpg);
      /* 背景尺寸：占满封面 */
      background-size: cover;
      /* 添加过渡动画效果 */
      transition: all 0.5s;
    }

    ul {
      /* 开启 flex 布局，子元素默认会水平排列 */
      display: flex;
      /* 水平内容对齐：居中 */
      justify-content: center;
    }

    li {
      /* 去除 li 的小圆点 */
      list-style: none;
    }

    img {
      /* 给图片设置宽度 */
      width: 100px;
      /* border 边框  solid 实线 */
      border: 2px solid #fff;
      /* 鼠标指针变成小手 */
      /* 🔔 鼠标悬停点击 MDN Reference 看开发文档 */
      cursor: pointer;
    }
  </style>
</head>

<body>
  <!-- ul 列表分区 -->
  <ul>
    <!-- li 列表项  img 图片 -->
    <li><img src="./images/1.jpg" alt=""></li>
    <li><img src="./images/2.jpg" alt=""></li>
    <li><img src="./images/3.jpg" alt=""></li>
    <li><img src="./images/4.jpg" alt=""></li>
  </ul>
  <script>
    // 需求分析：
    //   1. 查找所有 img 标签
    //   2. 给所有 img 标签添加点击事件

    // 查找一个标签
    // let img = document.querySelector('img')
    // 查找多个标签      All 表示全部
    let imgs = document.querySelectorAll('img')
    // console.log(imgs)

    // 注意： imgs 是集合     forEach 循环遍历，用于执行重复代码
    //       img  才是每个一成员，成员才能添加事件
    imgs.forEach(function (img) {
      // 重复给每一个 img 添加点击事件
      img.addEventListener('click', function () {
        // 查找 body 标签
        let body = document.querySelector('body')
        // 修改 body 的背景图，，url 地址修改为被点击图片的 src
        body.style.backgroundImage = `url(${img.src})`
      })
    })
  </script>
</body>

</html>